<script lang="ts" setup>
import SearchResult from "../components/search/SearchResultComponent.vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import { getPlayDetail, getRecommend } from '../api/api'
import { wantStore } from '../stores/want'

const route = useRoute()
const router = useRouter()
const pid = ref(route.params.pid)
const active = ref(0)
const showCon = ref(true)
const showTxt = ref(true)
const showLove = ref(false)
const requestSuccess = ref(false)
const wantPinias = wantStore()

const playDetail = reactive({
    playDetailList: {
        name: "",
        shopName: "",
        posterUrl: "",
        lat: "",
        lng: "",
        address: "",
        showTimeRange: "",
        priceList: [],
        detail: "",
        cityName: "",
        ticketNotes: "",
        projectServing: {
            pictureURL: ""
        }
    }
})

const recommend = reactive({
    recommendList: {}
})

// 演出详情
const getPlayDetailApi = async (id = pid.value as string) => {
    let {data} = await getPlayDetail(id)
    playDetail.playDetailList = data
    requestSuccess.value = true
    // console.log(data);
}

// 为你推荐
const getRecommendApi = async () => {
    let {data} = await getRecommend()
    recommend.recommendList = data
}

const showContent = () => {
    showCon.value = !showCon.value
}

const showContxt = () => {
    showTxt.value = !showTxt.value
}

const goToWay = () => {
    router.push({
        name:'playWay',
        params: {
            pid: pid.value, 
            lat: playDetail.playDetailList.lat,
            lng: playDetail.playDetailList.lng
        }
    })
}

const addWantPlaysList = () => {
    showLove.value = true
    let wantItem = {
        id: pid.value,
        nm: playDetail.playDetailList?.name,
        img: playDetail.playDetailList?.posterUrl,
        wantNum: String(playDetail.playDetailList?.priceList[0]) + String(playDetail.playDetailList?.priceList[1]?"-"+playDetail.playDetailList?.priceList[1]:""),
        actor: "",
        date: playDetail.playDetailList?.showTimeRange,
        address: playDetail.playDetailList.cityName + " " + playDetail.playDetailList.address,
        type: 1, // 0为电影，1为演出
    }
    wantPinias.addWantList(wantItem)
}

const haveWant = () => {
    let myWantList = JSON.parse(localStorage.my_want || '[]')
    if(myWantList.userWantList){
        let isWant = myWantList.userWantList.filter(k => k.id == pid.value)[0]
        if(isWant){
            showLove.value = true
        }
    }
}

onMounted(() => {
    window.scrollTo(0,0);
    getPlayDetailApi()
    getRecommendApi()
    haveWant()
})

onBeforeRouteUpdate((to,from,next) => {
    window.scrollTo(0,0);
    getPlayDetailApi(to.params.pid as string)
    next()
})
</script>

<template>
<div>
    <!-- 请求未完成时 -->
    <div class="requesting" v-if="!requestSuccess">
        <img src="../assets/imgs/play/loading.gif" alt="">
        <div>数据请求中</div>
    </div>

    <div v-if="requestSuccess">
        <div class="detail-main">
            <div class="play-details">
                <img :src="playDetail.playDetailList.posterUrl" class="play-img">
                <div class="play-details-con">
                    <div class="play-details-name">{{ playDetail.playDetailList.name }}</div>
                    <div class="play-details-price">
                        <div><span>{{ playDetail.playDetailList.priceList[0] }}<i v-show="playDetail.playDetailList.priceList[1]"> - </i>{{ playDetail.playDetailList.priceList[1] }}</span> 元</div>
                        <div class="seatMap">
                            <img src="../assets/imgs/play/sofa.png">票区图
                        </div>
                    </div>
                </div>
            </div>
            <div class="discount">
                <div class="discount-con">
                    <a>套票5折起</a>
                </div>
                <div class="discount-btn">
                    查看 <img src="../assets/imgs/play/right.png">
                </div>
            </div>
            <div class="detail-time">
                <div>{{ playDetail.playDetailList.showTimeRange }}</div>
                <img src="../assets/imgs/play/right.png" alt="">
            </div>
            <div class="detail-way">
                <div class="detail-address">
                    <div class="address-span">{{ playDetail.playDetailList.shopName }}</div>
                    <div>{{ playDetail.playDetailList.cityName }}市{{ playDetail.playDetailList.address }}</div>
                </div>
                <div class="discount-btn" @click="goToWay">
                    路线 <img src="../assets/imgs/play/right.png">
                </div>
            </div>
        </div>

        <div class="line"></div>
        <div class="evaluation">
            <div class="evaluation-con">大家期待你的评价</div>
            <div class="evaluation-btn">
                <img src="../assets/imgs/play/write.png">写评价
            </div>
        </div>
        <div class="line"></div>
        
        <div class="detail-banner" v-if="playDetail.playDetailList.projectServing">
            <img :src="playDetail.playDetailList.projectServing?.pictureURL">
        </div>

        <van-tabs v-model:active="active" scrollspy sticky color="#f83a3c">
            <van-tab title="介绍">
                <div class="det-title">演出详情</div>
                <div class="detail-content" :class="{active: showCon}" v-html="playDetail.playDetailList.detail"></div>
                <div class="show-btn" @click="showContent">{{ showCon?"展开更多":"收起" }}</div>
            </van-tab>
            <van-tab title="须知">
                <div class="det-title">购票须知</div>
                <div class="detail-txt" v-if="(playDetail.playDetailList.ticketNotes).indexOf('<') != -1" :class="{active: showTxt}" v-html="(playDetail.playDetailList.ticketNotes).indexOf('<') != -1 ?playDetail.playDetailList.ticketNotes:''"></div>

                <div class="detail-txt" v-if="(playDetail.playDetailList.ticketNotes).indexOf('<') == -1 && (playDetail.playDetailList.ticketNotes).indexOf('温') != -1" :class="{active: showTxt}" v-html="playDetail.playDetailList.ticketNotes"></div>

                <div class="warp" :class="{active: showTxt}" v-if="(playDetail.playDetailList.ticketNotes).indexOf('<') == -1 && (playDetail.playDetailList.ticketNotes).indexOf('温') == -1">
                    <div class="warp-item" v-for="p in (playDetail.playDetailList.ticketNotes.indexOf('<') == -1) ? JSON.parse(playDetail.playDetailList.ticketNotes):''" :key="p.code">
                        <div class="title">{{ p.title }}</div>
                        <div class="con">{{ p.content }}</div>
                    </div>
                </div>
                <div class="show-btn" @click="showContxt">{{ showTxt?"展开更多":"收起" }}</div>
            </van-tab>
            <van-tab title="推荐">
                <div class="det-title">为你推荐</div>
                <SearchResult v-for="p in recommend.recommendList" :pList="p"/>
            </van-tab>
        </van-tabs>

        <div class="detail-bot"></div>

        <div class="play-details-bottom">
            <div class="want" @click="addWantPlaysList">
                <div class="love-img">
                    <img src="../assets/imgs/play/want.png" v-show="!showLove">
                    <img src="../assets/imgs/play/love.png" style="width: 6vw;" v-show="showLove">
                </div>
                <div>{{showLove?"已想看":"想看"}}</div>
            </div>
            <div class="buy-btn">立即购票</div>
        </div>

        <div class="return-btn" @click="$router.go(-1)">
            返回
        </div>
    </div>
</div>
</template>

<style lang="scss" scoped>
.requesting{
    text-align: center;
    padding: 20vw 0;

    img{
        width: 20vw;
    }
}

.detail-main{
    width: 100vw;
    padding: 0 4vw;
    padding-top: 4vw;
    box-sizing: border-box;
    background: url(../assets/imgs/play/basic-bg.png) no-repeat;
    background-size: contain;
    
    .play-details{
        width: 92vw;
        display: flex;
        align-items: center;

        .play-img{
            width: 28vw;
            height: 35vw;
            border-radius: 4vw;
            margin-right: 3vw;
        }
        .play-details-con{
            width: 58vw;
            height: 33vw;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

            .play-details-name{
                font-size: 16px;
                font-weight: bold;
                width: 55vw;
                line-height: 5.5vw;
            }
            .play-details-price{
                width: 58vw;
                color: #f73b3b;
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                span{
                    font-size: 16px;
                    font-weight: bold;
                }
                .seatMap{
                    display: flex;
                    align-items: baseline;
                    color: #666666;

                    img{
                        width: 3vw;
                        height: auto;
                        margin-right: 1vw;
                        transform: translateY(1px);
                    }
                }
            }
        }
    }
    .discount{
        color: #666666;
        font-size: 13px;
        width: 92vw;
        padding: 5vw 1vw 2.5vw 1vw;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        

        .discount-con{
            
            a{
                color:  #f73b3b;
                display: inline-block;
                padding: 3px 5px;
                background-color: #ffebeb;
                border-radius: 1vw;
            }
        }
        .discount-btn{
            display: flex;
            align-items: center;

            img{
                width: 5vw;
            }
        }
    }
    .detail-time{
        width: 92vw;
        height: 10vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1vw;
        box-sizing: border-box;
        border-top: #f2f2f2 1px solid;
        border-bottom: #f2f2f2 1px solid;

        div{
            font-size: 13px;
            font-weight: bold;
        }

        img{
            width: 5vw;
        }
    }
    .detail-way{
        color: #666666;
        font-size: 13px;
        width: 92vw;
        height: 15vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1vw;
        box-sizing: border-box;
        border-bottom: #f2f2f2 1px solid;

        .detail-address{
            width: 70vw;
            line-height: 5vw;
            
            .address-span{
                color: #222222;
                font-weight: bold;
            }
        }
        .discount-btn{
            display: flex;
            align-items: center;

            img{
                width: 5vw;
            }
        }
    }
}

.evaluation{
    height: 14vw;
    padding: 0 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url(../assets/imgs/play/bg1.png) no-repeat;
    background-size: contain;
    .evaluation-con{
        font-size: 15px;
        font-weight: bold;
    }
    .evaluation-btn{
        width: 18vw;
        height: 6.5vw;
        font-size: 12px;
        display: flex;
        align-items: center;
        background-color: #f6f6f6;
        border-radius: 4vw;

        img{
            width: 5vw;
            margin-left: 1vw;
        }
    }
}

.detail-banner{
    width: 100%;
    padding: 4vw 0;
    background-color: #fff;

    img{
        display: block;
        width: 92vw;
        height: 26vw;
        border-radius: 4vw;
        margin: 0 auto;
    }
}

.det-title{
    width: 100vw;
    padding: 0 4vw;
    box-sizing: border-box;
    color: #333333;
    font-weight: bold;
    line-height: 12vw;
}
.detail-content{
    width: 100vw;
    padding: 0 4vw;
    padding-bottom: 14vw;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 14px;
    color: #666;
    line-height: 6vw;

    &.active{
        height: 500vw;
    }
}

.detail-txt{
    font-size: 14px;
    color: #666;
    width: 100vw;
    line-height: 6vw;
    padding: 0 4vw;
    padding-bottom: 14vw;
    box-sizing: border-box;
    overflow: hidden;

    &.active{
        height: 100vw;
    }
}

.warp{
    color: #666;
    font-size: 12px;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    line-height: 6vw;
    padding: 0 4vw;
    padding-bottom: 14vw;
    box-sizing: border-box;
    overflow: hidden;

    .warp-item{
        width: 45%;

        .title{
            font-size: 14px;
            color: #222222;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .con{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 4vw;
        }
    }

    &.active{
        height: 80vw;
    }
}

.show-btn{
    color: #f73b3b;
    width: 100vw;
    height: 20vw;
    line-height: 30vw;
    text-align: center;
    transform: translateY(-18vw);
    background: linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,.7) 35%,hsla(0,0%,100%,.9)50%, #fff);
    z-index: 999;
}

.play-details-bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 15vw;
    padding: 0 8vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;

    .want{
        color: #444444;
        font-size: 13px;
        text-align: center;
        line-height: 2.5vw;

        .love-img{
            width: 7vw;
            height: 7vw;
            margin: 0 auto;

            img{
                width: 7vw;
            }
        }
    }
    .buy-btn{
        width: 70vw;
        height: 11vw;
        line-height: 11vw;
        text-align: center;
        color: #ffffff;
        background-color: #f73b3b;
        border-radius: 6vw;
    }
}

.detail-bot{
    width: 100vw;
    height: 15vw;
}

.return-btn{
    color: #ffffff;
    font-size: 12px;
    position: fixed;
    right: 4vw;
    bottom: 15vh;
    width: 11vw;
    height: 11vw;
    text-align: center;
    line-height: 11vw;
    background-color: rgba(#f73b3b, 0.8);
    border-radius: 50%;
}

.line{
    width: 100vw;
    height: 2vw;
    background-color: #f0f0f0;
}
</style>